<template>
    <div :class='chart' :style="{height:'300px',width:'100%'}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import {getOldCount} from "@/api/recordApi";

const animationDuration = 1000

export default {
  mixins: [resize],
  props: ["recordTime"],
  data() {
    return {
      chart: null,
      record: [],
      time: '本周',
    }
  },
  created() {
    this.initRecord()
  },
  mounted() {
    this.initRecord()
  },
  watch: {
    recordTime: function (newV) {
      this.time = JSON.stringify(newV).replace(/"/g, '')
      this.initRecord()
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initRecord() {
      if(this.time === '本周' || this.time ===''){
        getOldCount(0).then(res => {
          this.record = res.result.map(item => ({
            value: item.value,
            name: item.oldsterName
          }));
          this.initChart()
        }).catch(err => {
          console.log(err);
        })
      }
      if(this.time === '今天'){
        getOldCount(1).then(res => {
          this.record = res.result.map(item => ({
            value: item.value,
            name: item.oldsterName
          }));
          this.initChart()
        }).catch(err => {
          console.log(err);
        })
      }
      if(this.time === '本月'){
        getOldCount(2).then(res => {
          this.record = res.result.map(item => ({
            value: item.value,
            name: item.oldsterName
          }));
          this.initChart()
        }).catch(err => {
          console.log(err);
        })
      }

    },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        radar: {
          radius: '66%',
          center: ['50%', '42%'],
          splitNumber: 8,
          splitArea: {
            areaStyle: {
              color: 'rgba(127,95,132,.3)',
              opacity: 1,
              shadowBlur: 45,
              shadowColor: 'rgba(0,0,0,.5)',
              shadowOffsetX: 0,
              shadowOffsetY: 15
            }
          },
          indicator: [
            { name: '区域入侵', max: 8 },
            // { name: '老人跌倒', max: 10 },
            { name: '互动', max: 8 },
            { name: '情绪异常', max: 8 },
            { name: '吸烟行为检测', max: 8 },
            // { name: '陌生人入侵', max: 10 }
          ]
        },
        legend: {
          left: 'center',
          bottom: '10',
          // data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
        },
        series: [{
          type: 'radar',
          symbolSize: 0,
          areaStyle: {
            normal: {
              shadowBlur: 13,
              shadowColor: 'rgba(0,0,0,.2)',
              shadowOffsetX: 0,
              shadowOffsetY: 10,
              opacity: 1
            }
          },
          data: this.record,
          animationDuration: animationDuration
        }]
      })
    }
  }
}
</script>

